<template>
  <a-modal 
    v-model:open="visible" 
    title="上传结果" 
    width="90%" 
    style="top: 20px" 
    :footer="null">
    <a-row style="margin-bottom: 10px">
      <a-col :span="8">
        <a-statistic title="总数" :value="stat.totalCount" style="margin-right: 50px" />
      </a-col>
      <a-col :span="8">
        <a-statistic 
          title="成功数" 
          :value="stat.totalCount - stat.errorCount" 
          style="margin-right: 50px"
          :value-style="{ color: '#3f8600' }"
        />
      </a-col>
      <a-col :span="8">
        <a-statistic 
          title="失败数" 
          :value="stat.errorCount" 
          :value-style="{ color: '#cf1322' }"/>
      </a-col>
    </a-row>
    <a-table 
      :columns="columns" 
      :data-source="errorList" 
      bordered 
      size="small"
      :pagination="{defaultPageSize: 8}">
      <template #title>失败列表</template>
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'index'">
          <span>{{index + 1}}</span>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="() => openErrorLog(record.logText)">查看日志</a-button>
        </template>
      </template>
    </a-table>
    <a-modal 
      v-model:open="errorLogOpen" 
      title="错误日志" 
      width="60%" 
      style="top: 30px" 
      :footer="null"
      :bodyStyle="{height: '75vh'}"
      >
      <log-code-mirror v-model="logContent" />
    </a-modal>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const visible = defineModel('visible')
const logContent = ref("")
const errorLogOpen = ref(false)


const props = defineProps({
  type: {
    type:String,
    required: true
  },
  stat: {
    type: Object,
    required: true
  },
  errorList: {
    type: Array,
    required: true
  }
})

const mavenColumns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: 'groupId',
    dataIndex: 'groupId'
  },
  {
    title: 'artifactId',
    dataIndex: 'artifactId'
  },
  {
    title: 'version',
    dataIndex: 'version'
  },
  {
    title: 'type',
    dataIndex: 'packing'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]

const npmColumns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '包名',
    dataIndex: 'tarballName'
  },
  {
    title: '版本',
    dataIndex: 'tarballVersion'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]

const columns = computed(() => {
  return props.type === "npm" ? npmColumns : mavenColumns;
}) 

function  openErrorLog(logText) {
  logContent.value = logText
  errorLogOpen.value = true;
}
</script>

<style scoped>
.errorLogModal {
  height: 80vh;
  overflow-y: auto;
}
</style>
